import { useSearchParams } from "react-router-dom";

const SearchComponent = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   // 获取当前的查询参数
    const query = searchParams.get('p');

   // 更新查询参数
    const updateQuery = (newQuery) => {
        setSearchParams({
            p: newQuery,
        });
    };
   return (
        <div>
            <input 
                type="text"
                value={query || ''}
                onChange={(e) => {
                    updateQuery(e.target.value)
                }}
            />
            <button onClick={() => {updateQuery('newQuery')}}>updateQuery</button>
        </div>
   ) 
};

export default SearchComponent;